<script setup lang='ts'>
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import CountInfoVue from './countinfo.vue'
import { computed, reactive, ref } from 'vue';
import { useDark, useECharts } from '@pureadmin/utils';
import { useRouter } from 'vue-router';
const searchTime = ref('');
/**
 * 处理表格排序改变时
 */
function handleSortChange() {

}
const chartRef = ref<HTMLDivElement>()
const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));
const router = useRouter()
const { setOptions } = useECharts(chartRef, { theme })
setOptions({
  tooltip: {
    trigger: 'axis',
    formatter: (params: any[]) => {
      let total = params.reduce((pre, curr) => pre + curr.value, 0);
      const markArr = params.map(item => {
        return `<div class="flex justify-between gap-4"> <span class="">${item.marker} ${item.seriesName}</span> <span>${item.value}</span></div>`
      });

      return `<div>${params.at(0)?.name}</div>${markArr.join('')}<div class="flex justify-between"><span class="ml-4">总计:</span> <span>${total}</span></div>`
    }
  },
  xAxis: {
    type: 'category',
    data: ['周1', '周2', '周3', '周4', '周5', '周6', '周7']
  },
  legend: {
    data: ['主播', '团战场次', '赛季卡', '赛事', '礼物']
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisLabel: { show: false },
    axisTick: {
      show: false,
    }
  },
  series: [
    {
      name: '主播',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '团战场次',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '赛季卡',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '赛事',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '礼物',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }

  ]
})

const tableData = reactive([
  {}
])
</script>

<template>

  <ElCard>

    <div class="flex justify-between mb-8">
      <div>机构/主播名称</div>
      <ElDatePicker v-model="searchTime" type="date" placeholder="选择查询时间" :clearable="false" />
    </div>
    <ElTabs>
      <ElTabPane label="机构收益">
        <CountInfoVue />
        <div ref="chartRef" class="my-8 w-full h-[400px]"></div>
        <ElTable border @sort-change="handleSortChange" :data="tableData" class="mt-8">
          <ElTableColumn align="center" label="主播" prop="key" />
          <ElTableColumn align="center" label="经纪人" prop="key" />
          <ElTableColumn align="center" label="团战场次" prop="key" />
          <ElTableColumn align="center" label="赛季卡" prop="key" />
          <ElTableColumn align="center" label="龙灵刷新" prop="key" />
          <ElTableColumn align="center" label="礼物打赏" prop="key" />
          <ElTableColumn align="center" label="合计收益" prop="key" />
          <ElTableColumn align="center" label="占比" prop="key" />
          <ElTableColumn align="center" label="操作" prop="key">
            <template #default="scope">
              <ElButton text type="primary" @click="() => router.push({ name:'IncomesAnchor'})">查看详情</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>
      <ElTabPane label="主播收益">

      </ElTabPane>
    </ElTabs>


  </ElCard>
</template>

<style lang='scss' scoped></style>
